<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { UtilTool } from "@webxue/common";
import { useWebxDict, useWebxRouteTabs } from "@webxue/vue3-antdv-ui";
import useForm from "@/hooks/useForm";
import useCusRouter from "@/hooks/useCusRouter";
import EventEmitTool from "@/utils/tools/event-emit.tool";

// 获取路由属性
const { router, routeQuery } = useCusRouter({
  queryKeys:[
    // 字典类型id
    "dictTypeId",
    // 是否只读
    "readonly"
  ]
});
// 字典操作
const { getList } = useWebxDict();
// 页签
const { addParentTab } = useWebxRouteTabs({ router });
// 获取详情hook
const { detailInfo, formRef, formState, onValidateFields, getFormRules } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    // 数据初始化
    formState.value.status = 1;

    if (!routeQuery.value.dictTypeId) return false;
    const response = await BaseApi.dictType.find({ id: routeQuery.value.dictTypeId });
    // 回显字典类型信息
    formState.value = UtilTool.lodash.cloneDeep(response.data);
    return Promise.resolve(response);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    // 响应结果
    let response: Partial<ResponseData> = {};
    // 请求参数
    const requestBody: Record<string, any> = {
      dictType: values.dictType.startsWith("dict-") ? values.dictType : ("dict-" + values.dictType),
      dictName: values.dictName,
      dictUseType: values.dictUseType,
      remark: values.remark,
      status: values.status,
    };
    if (routeQuery.value.dictTypeId) {
      // 编辑
      response = await BaseApi.dictType.update({
        ...requestBody,
        id: routeQuery.value.dictTypeId
      });
    } else {
      // 新增
      response = await BaseApi.dictType.save({
        ...requestBody
      });
    }
    if(response.success) {
      addParentTab();
    }
  }
})

// form保存回调
EventEmitTool.on("FORM:SAVE", () => {
  // 开始校验
  onValidateFields();
});
</script>

<template>
  <div>
    <WebxForm ref="formRef" :model="formState" :readonly="!!routeQuery.readonly">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'字典类型' }">
          <ARow class="px-2 pb-4" :gutter="[0, 10]">
            <ACol :span="8">
              <WebxFormItem label="字典名称" name="dictName" :rules="[{ required: true, message:'请输入字典名称' }]">
                <AInput v-model:value="formState.dictName" placeholder="请输入字典名称" />
                <template #readonly>{{ formState.dictName }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="字典类型" name="dictType" :rules="[{ required: true, message:'请输入字典类型' }]">
                <AInput v-model:value="formState.dictType" placeholder="请输入字典类型" :disabled="!!routeQuery.dictTypeId" />
                <template #readonly>{{ formState.dictName }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="适用范围" name="dictUseType" :rules="[{ required: true, message:'请选择适用范围' }]">
                <ASelect v-model:value="formState.dictUseType" placeholder="请选择适用范围" :options="getList('dict_use_type')" />
                <template #readonly>{{ formState.dictUseType }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="状态" name="status">
                <ARadioGroup v-model:value="formState.status">
                  <ARadio :value="1">启用</ARadio>
                  <ARadio :value="2">停用</ARadio>
                  <ARadio :value="3">删除</ARadio>
                </ARadioGroup>
                <template #readonly>
                  <ATag color="green" v-if="formState.status === 1">启用</ATag>
                  <ATag color="red" v-if="formState.status === 2">停用</ATag>
                  <ATag color="red" v-if="formState.status === 3">删除</ATag>
                </template>
              </WebxFormItem>
            </ACol>
            <ACol :span="24">
              <WebxFormItem label="备注" name="remark">
                <ATextarea v-model:value="formState.remark" placeholder="请输入备注" :autoSize="{ minRows: 4, maxRows: 4 }" />
                <template #readonly>{{ formState.remark }}</template>
              </WebxFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
    </WebxForm>
  </div>
</template>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 0;
  :deep(.ant-form-item-label){
    width: 120px;
  }
}
</style>
